<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="searchBox">
			<uni-search-bar radius="50" placeholder="好找药,找好药" clearButton="auto" cancelButton="none" />
		</view>

		<!-- 轮播图  -->
		<swiper class="swiper" indicator-dots autoplay>
			<swiper-item>
				<image class="swiperItem" src="/static/swiperImg/pic1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperItem" src="/static/swiperImg/pic2.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiperItem" src="/static/swiperImg/pic3.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 导航区 -->
		<view class="navBar">
			<view class="navBarItem" v-for="(item, index) in navBarArr" :key="item.id">
				<image :src="item.pic" mode="aspectFill"></image>
				<view class="navBarTitle">
					{{item.title}}
				</view>
			</view>
		</view>

		<!-- 频道展示区 -->
		<view class="channelTiele">
			<text class="title">健康频道</text>
			<text class="subTitle">严选商品 物美价廉</text>
		</view>
		<view class="channelBox">
			<view class="channelBoxItem" v-for="(item, index) in channelArr" :key="item.id">
				<view class="itemTop">
					<view class="title">
						{{item.title}}
					</view>
					<view class="describe">
						{{item.describe}}
					</view>
					<view class="line" />
				</view>
				<view class="itemBottom">
					<image :src="item.pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 企业资质-->
		<view class="qualificationsBox">
			<view class="qualificationsBoxBody">
				<view class="bodyTop">
					<text class="zebra-stripe" />
					企业资质
					<text class="zebra-stripe" />
				</view>
				<view class="bodyBottom">
					<image src="/static/qualifications/pic1.jpg" mode="aspectFill"></image>
					<image src="/static/qualifications/pic2.jpg" mode="aspectFill"></image>
					<image src="/static/qualifications/pic3.jpg" mode="aspectFill"></image>
					<image src="/static/qualifications/pic4.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="youLikeTitle">
			<view class="line" />
			猜你喜欢
			<view class="line" />
		</view>
		<view class="youLikeBox">
			<view class="youLikeBoxItem" v-for="item in 9" :key="item">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarArr: [{
						id: 1,
						title: "日常用药",
						pic: "/static/navBarImg/日常用药.png"
					},
					{
						id: 2,
						title: "男性专区",
						pic: "/static/navBarImg/男性专区.png"
					},
					{
						id: 3,
						title: "女性专区",
						pic: "/static/navBarImg/女性专区.png"
					},
					{
						id: 4,
						title: "维矿物质",
						pic: "/static/navBarImg/维矿物质.png"
					},
					{
						id: 5,
						title: "成人计生",
						pic: "/static/navBarImg/成人计生.png"
					},
					{
						id: 6,
						title: "隐形眼镜",
						pic: "/static/navBarImg/隐形眼镜.png"
					},
					{
						id: 7,
						title: "医疗器械",
						pic: "/static/navBarImg/医疗器械.png"
					},
					{
						id: 8,
						title: "资质许可",
						pic: "/static/navBarImg/资质许可.png"
					}
				],

				channelArr: [{
						id: 1,
						title: "男科用药",
						describe: "男人就是要硬气",
						pic: "/static/channelImg/男科用药.png"
					},
					{
						id: 2,
						title: "妇科用药",
						describe: "女人就是要美丽",
						pic: "/static/channelImg/妇科用药.png"
					},
					{
						id: 3,
						title: "心脑血管",
						describe: "",
						pic: "/static/channelImg/心脑血管用药.png"
					},
					{
						id: 4,
						title: "内分泌用药",
						describe: "",
						pic: "/static/channelImg/内分泌用药.png"
					},
					{
						id: 5,
						title: "肝胆用药",
						describe: "",
						pic: "/static/channelImg/肝胆用药.png"
					},
					{
						id: 6,
						title: "呼吸系统",
						describe: "",
						pic: "/static/channelImg/呼吸系统用药.png"
					},
					{
						id: 7,
						title: "皮肤科",
						describe: "",
						pic: "/static/channelImg/皮肤科用药.png"
					},
					{
						id: 8,
						title: "风湿骨科",
						describe: "",
						pic: "/static/channelImg/风湿骨科用药.png"
					},
					{
						id: 9,
						title: "五官用药",
						describe: "",
						pic: "/static/channelImg/五官用药.png"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.content {
		padding-bottom: 15rpx;
	}

	.searchBox {
		background-color: #C20102;
		width: 750rpx;
	}

	.swiper {
		width: 750rpx;
		height: 230rpx;
		text-align: center;
		padding: 10rpx 0;
		background-color: white;

		.swiperItem {
			width: 730rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}

	.navBar {
		height: 300rpx;
		width: 750rpx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		padding-bottom: 20rpx;
		background-color: white;

		.navBarItem {
			width: 120rpx;
			height: 100rpx;
			font-size: 24rpx;
			margin: 0 30rpx;

			image {
				width: 85rpx;
				height: 85rpx;
			}
		}
	}

	.channelTiele {
		width: 750rpx;
		text-align: left;
		padding: 20rpx 3rpx;

		.title {
			font-size: 28rpx;
			margin-right: 10rpx;
		}

		.subTitle {
			font-size: 28rpx;
			color: #CDCBCD;
		}
	}

	.channelBox {
		width: 735rpx;
		display: grid;
		// 定义网格的列结构。这里使用了 repeat 函数，表示创建两列，每列宽度相等（由 1fr 指定，表示等份）。
		grid-template-columns: repeat(2, 1fr);
		// 定义网格的行结构。这里使用了 repeat 函数，表示创建四行，每行高度相等（由 1fr 指定，表示等份）。
		grid-template-rows: repeat(4, 1fr);
		// 根据需要调整间距
		gap: 5rpx;

		.channelBoxItem {
			width: 360rpx;
			height: 260rpx;
			margin-bottom: 5rpx;
			background-color: white;
			border-radius: 3rpx;
			padding: 25rpx;

			&:first-child {
				// 使第一个元素占据2行的高度
				grid-row: span 2;
				height: 530rpx;
				border-radius: 60rpx 0 0 0;

				.itemBottom image {
					width: 270rpx;
					height: 270rpx;
				}
			}

			.itemTop {
				// border: 1px solid crimson;
				height: 30%;


				.title {
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				.describe {
					font-size: 22rpx;
					color: #A1A0A1;
					margin-bottom: 18rpx;
				}

				.line {
					width: 60rpx;
					height: 2px;
					border-radius: 20rpx;
					background-color: #E6E4E7;
				}
			}

			.itemBottom {
				// border: 1px solid darkcyan;
				height: 70%;
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;

				image {
					width: 150rpx;
					height: 130rpx;
				}
			}
		}
	}

	.qualificationsBox {
		width: 750rpx;
		height: 480rpx;
		background-color: white;
		margin: 15rpx 0 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.qualificationsBoxBody {
			width: 90%;
			height: 90%;
			background-color: #F9F9F9;

			.bodyTop {
				width: 100%;
				height: 15%;
				background-color: #1DBD61;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				font-weight: bold;

				.zebra-stripe {
					width: 130rpx;
					/* 设置div的宽度 */
					height: 10rpx;
					/* 设置div的高度 */
					background: linear-gradient(45deg, #3CCB78 25%, transparent 25%, transparent 75%, #3CCB78 75%, #3CCB78), linear-gradient(45deg, #3CCB78 25%, transparent 25%, transparent 75%, #3CCB78 75%, #3CCB78);
					/* 创建斑马线背景 */
					background-size: 10rpx 10rpx;
					/* 设置斑马线的大小 */
					background-position: 0 0, 5rpx 5rpx;
					/* 设置斑马线的位置 */
					background-repeat: repeat;

					/* 使斑马线重复 */
					&:first-child {
						margin-right: 20rpx;
					}

					&:last-child {
						margin-left: 20rpx;
					}
				}
			}

			.bodyBottom {
				width: 100%;
				height: 85%;
				display: grid;
				/* 使用网格布局 */
				grid-template-columns: repeat(2, 1fr);
				/* 设置两列 */
				grid-template-rows: repeat(2, 1fr);
				/* 设置两行 */
				gap: 5rpx;
				/* 设置网格单元格之间的间距 */
				place-items: center;
				/* 水平和垂直居中 */

				image {
					width: 250rpx;
					height: 150rpx;
				}
			}
		}
	}

	.youLikeTitle {
		width: 750rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.line {
			width: 160rpx;
			height: 2rpx;
			background-color: #D3D3D3;
			border-radius: 20rpx;


			&:first-child {
				margin-right: 25rpx;
			}

			&:last-child {
				margin-left: 25rpx;
			}
		}
	}

	.youLikeBox {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(2, 1fr);
		/* 设置两列 */
		grid-auto-rows: minmax(100px, auto);
		/* 设置自动行高 */
		gap: 15rpx;

		.youLikeBoxItem {
			width: 350rpx;
			height: 420rpx;
			// border: 1px solid crimson;
			background-color: white;
		}


	}
</style>